import { login, logout, getInfo } from "@/api/user";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { resetRouter, constantRoutes, dynamicRoutes } from "@/router";
import { cloneDeep } from "@/utils/cloneDeep";
import router from "@/router";

const getDefaultState = () => {
  return {
    token: getToken(),
    // 用户名
    name: "",
    // 登录成功后的用户头像
    avatar: "",
    // 权限按钮
    buttons: [],
    // 用户权限数组
    roles: [],
    // 路由名数组(每一个路由对象的name属性写的值的对象)
    routes: [],
    // 不同角色用户要显示的管理菜单，初始化静态路由
    menuRoutes: [...constantRoutes],
  };
};

const state = getDefaultState();

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState());
  },
  SET_TOKEN: (state, token) => {
    state.token = token;
  },
  SET_NAME: (state, name) => {
    state.name = name;
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar;
  },
  // 设置权限相关的数据
  SET_ROLES(state, data) {
    state.buttons = data.buttons;
    state.roles = data.roles;
    state.routes = data.routes;
  },
  // 更新权限路由
  SET_MENUROUTES(state, routes) {
    // push方法可以添加到数组的末尾，一个或多个元素
    state.menuRoutes.push(...routes);
  },
  // 初始化渲染路由
  RESET_STATE(state) {
    state.menuRoutes = [...constantRoutes];
  },
};

const actions = {
  // 登录接口
  async login({ commit }, userInfo) {
    const { username, password } = userInfo;
    try {
      const res = await login({
        username: username.trim(),
        password: password,
      });
      const { data } = res;
      commit("SET_TOKEN", data.token);
      setToken(data.token);
      return res;
    } catch (error) {
      console.log(error);
      return Promise.reject(error);
    }
  },

  // 获取用户信息
  async getInfo({ commit, state }) {
    try {
      // 获取的用户信息里面有 头像、可用的按钮数组、权限数组、昵称、可用的路由
      const response = await getInfo(state.token);
      const { data } = response;
      if (!data) {
        return reject("Verification failed, please Login again.");
      }
      const { name, avatar } = data;
      commit("SET_NAME", name);
      commit("SET_AVATAR", avatar);
      // 设置权限相关的数据
      commit("SET_ROLES", data);
      // ------------------------------------权限管理------------------------------------
      // 1、过滤掉不符合权限的路由
      const newRoute = cloneDeep(dynamicRoutes).filter((item) => {
        // 过滤掉不符合权限的路由,
        const flag = state.routes.includes(item.name);
        // 判断是否符合权限
        if (flag) {
          // 符合权限，判断有没有子路由
          if (item.children && item.children.length > 0) {
            // 有子路由的话，判断子路由符不符合权限,过滤掉不符合权限的子路由对象
            item.children = item.children.filter((v) => {
              // 如果符合权限，在数组里面，就留下，不符合就过滤
              return state.routes.includes(v.name);
            });
          }

          // 添加到路由器对象里去，跳转的时候才有路劲
        }
        // else {
        // 不符合权限，判断路由器router里面有没有这个不符合权限的路由，如果有就删除
        // if (router.hasRoute(item.name)) {
        //   router.removeRoute(item.name);
        // }
        // }
        // 返回处理好的符合权限的路由对象
        return flag;
      });
      // 将处理好的路由对象添加到渲染路由中
      commit("SET_MENUROUTES", newRoute);
      // 使用addRoutes方法，添加一个路由器对象数组，到router里面
      router.addRoutes(newRoute);
      return data;
    } catch (error) {
      return Promise.reject(error);
    }
  },

  // user logout
  async logout({ commit, state }) {
    try {
      await logout(state.token);
      removeToken(); // must remove  token  first

      // 初始化渲染路由
      commit("RESET_STATE");
      // 初始化路由
      resetRouter();
      commit("RESET_STATE");
      return "ok";
    } catch (error) {
      return Promise.reject(error);
    }
  },

  // remove token
  resetToken({ commit }) {
    removeToken(); // must remove  token  first
    commit("RESET_STATE");
    return "ok";
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};
